---
title: Страницы
description: Введение в страницы Astro
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

**Страницы** — это файлы, находящиеся в поддиректории `src/pages/` вашего Astro-проекта. Они отвечают за маршрутизацию, загрузку данных и общую структуру каждой страницы вашего сайта.

## Поддерживаемые типы файлов страниц 

Astro поддерживает следующие типы файлов в директории `src/pages/`:

- [`.astro`](#astro-страницы)
- [`.md`](#markdownmdx-страницы)
- `.mdx` (с [установленной интеграцией MDX](/ru/guides/integrations-guide/mdx/#installation))
- [`.html`](#страницы-html)
- `.js`/`.ts` (как [API эндпойнты](/ru/guides/endpoints/)) 

## Маршрутизация на основе файлов

Astro использует стратегию маршрутизации, называемую **маршрутизация на основе файлов**. Каждый файл в вашей директории `src/pages/` становится точкой входа на вашем сайте на основе его пути к файлу.

Один файл также может генерировать несколько страниц с помощью [динамической маршрутизации](/ru/guides/routing/#dynamic-routes). Это позволяет создавать страницы, даже если ваш контент находится за пределами специальной директории `/pages/`, например, в [коллекции контента](/ru/guides/content-collections/) или [CMS](/ru/guides/cms/).

<ReadMore>Узнайте больше о [маршрутизации в Astro](/ru/guides/routing/).</ReadMore>

### Ссылки между страницами

Для создания ссылок на другие страницы вашего сайта используйте стандартный HTML-элемент [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) на страницах Astro. Используйте **URL-путь относительно корневого домена** в качестве ссылки, а не относительный путь к файлу.

Например, чтобы создать ссылку на `https://example.com/authors/sonali/` с любой другой страницы на `example.com`:

```astro title="src/pages/index.astro"
Подробнее <a href="/authors/sonali/">о Сонали</a>.
```

## Astro-страницы

Astro страницы используют расширение файла `.astro` и поддерживают те же функции, что и [компоненты Astro](/ru/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="ru">
  <head>
    <title>Моя домашняя страница</title>
  </head>
  <body>
    <h1>Добро пожаловать на мой сайт!</h1>
  </body>
</html>
```

Страница должна создавать полный HTML-документ. Если не указано явно, Astro добавит необходимое объявление `<!DOCTYPE html>` и содержимое `<head>` к любому компоненту `.astro`, расположенному по умолчанию в `src/pages/`. Вы можете отказаться от этого поведения для каждого компонента, пометив его как [фрагментную](#фрагменты-страниц) страницу.

Чтобы избежать повторного использования HTML на каждой странице, вы можете переместить общие элементы `<head>` и `<body>` в свои собственные [компоненты макета](/ru/basics/layouts/). Вы можете использовать столько макетов, сколько захотите.

```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
---
import MySiteLayout from "../layouts/MySiteLayout.astro";
---
<MySiteLayout>
  <p>Мой контент страницы, обёрнутый в макет!</p>
</MySiteLayout>
```

<ReadMore>Подробнее о [компонентах макета](/ru/basics/layouts/) в Astro.</ReadMore>

## Markdown/MDX-страницы

Astro также обрабатывает любые файлы Markdown (`.md`) внутри `src/pages/` как страницы вашего сайта. Если у вас установлена интеграция [MDX](/ru/guides/integrations-guide/mdx/#installation), она также обрабатывает файлы MDX (`.mdx`).

:::tip
Рекомендуем использовать [коллекции контента](/ru/guides/content-collections/) вместо отдельных страниц для групп связанных Markdown-файлов с одинаковой структурой, таких как посты блога или карточки товаров.
:::

Файлы Markdown могут использовать специальное свойство `layout` в метаданных для указания [компонента макета](/ru/basics/layouts/), который обернет их содержимое Markdown в полный документ страницы `<html>...</html>`.

```md {3}
---
# Пример: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'Моя Markdown страница'
---
# Заголовок

Это моя страница, написанная на **Markdown.**
```

<ReadMore>Подробнее о [Markdown](/ru/guides/markdown-content/) в Astro.</ReadMore>

## Страницы HTML

Файлы с расширением `.html` могут быть помещены в директорию `src/pages/` и использоваться непосредственно в качестве страниц на вашем сайте. Обратите внимание, что некоторые ключевые возможности Astro не поддерживаются в [HTML-компонентах](/ru/basics/astro-components/#html-компоненты).

## Пользовательская страница ошибки 404

Для создания пользовательской страницы ошибки 404 вы можете создать файл `404.astro` или `404.md` в директории `/src/pages`.

Это приведет к созданию страницы `404.html`. Большинство [сервисов развёртывания](/ru/guides/deploy/) найдут и будут использовать её.

## Пользовательская страница ошибки 500

Чтобы создать пользовательскую страницу ошибки 500 для страниц, [рендерящихся по запросу](/ru/guides/on-demand-rendering/), создайте файл `src/pages/500.astro`. Эта страница недоступна для предварительно рендеренных страниц и сама не может быть предварительно отрендерена.

Если при рендеринге этой страницы произойдёт ошибка, посетителю будет показана стандартная страница ошибки 500 вашего хостинга.

<p><Since v="4.10.3" /></p>

В режиме разработки, если у вас есть `500.astro`, ошибка выполнения будет выведена в терминал, а не показана в оверлее ошибок.

### `error`

<p><Since v="4.11.0" /></p>

`src/pages/500.astro` — это особая страница, которая автоматически получает пропс `error` при возникновении любой ошибки во время рендеринга. Это позволяет использовать детали ошибки (например, из страницы, мидлвара и т. д.) для отображения информации пользователю.

Тип данных пропса `error` может быть любым, что может повлиять на его обработку в вашем коде:

```astro title="src/pages/500.astro"
---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---
<div>{error instanceof Error ? error.message : "Неизвестная ошибка"}</div>
```

Чтобы избежать утечки конфиденциальной информации при отображении данных из пропса `error`, рекомендуется сначала анализировать ошибку и возвращать соответствующий контент в зависимости от типа ошибки. Например, не следует отображать стек ошибки, так как он содержит информацию о структуре вашего серверного кода.

## Фрагменты страниц

<p><Since v="3.4.0" /></p>

:::caution
Фрагменты страниц предназначены для использования в сочетании с фронтенд-библиотекой, такой как [htmx](https://htmx.org/) или [Unpoly](https://unpoly.com/). Вы также можете использовать их, если вам удобно писать низкоуровневый внешний JavaScript. По этой причине они являются продвинутой функцией.

Кроме того, частичные компоненты (partials) не следует использовать, если компонент содержит изолированные стили или скрипты, так как эти элементы будут удалены из HTML-вывода. Если вам нужны изолированные стили, лучше использовать обычные (не частичные) страницы вместе с фронтенд-библиотекой, которая умеет объединять содержимое в раздел `<head>`.
:::

Фрагменты — это компоненты страниц, расположенные в директории `src/pages/`, которые не предназначены для отображения в виде полноценных страниц.

Как и компоненты, расположенные вне этой директории, эти файлы автоматически не включают декларацию `<!DOCTYPE html>`, а также любое содержимое `<head>`, такое как стили и скрипты.

Однако, поскольку они расположены в специальной директории `src/pages/`, сгенерированный HTML доступен по URL, соответствующему пути к файлу. Это позволяет библиотеке рендеринга (например, [htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)) получить к нему доступ на клиенте и динамически загружать секции HTML на страницу без обновления браузера или перехода по странице.

Фрагменты, в сочетании с библиотекой рендеринга, предоставляют альтернативу [островкам Astro](/ru/concepts/islands/) и [тегам `<script>`](/ru/guides/client-side-scripts/) для создания динамического контента в Astro.

Файлы страниц, поддерживающие экспорт значения [`partial`](/ru/reference/routing-reference/#partial) (например, `.astro`, `.mdx`), могут быть помечены как фрагменты.

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---
<li>Я — фрагмент!</li>
```

### Использование с библиотекой

Фрагментные страницы используются для динамического обновления раздела страницы с помощью такой библиотеки, как [htmx](https://htmx.org/).

В следующем примере атрибут `hx-post`  установлен на URL фрагментной страницы. Содержимое фрагментной страницы будет использовано для обновления целевого HTML-элемента на этой странице. 

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>My page</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">Цель здесь</div>
    
      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        Нажми меня!
      </button>
    </section>
  </body>
</html>
```

Файл с расширением `.astro` для фрагментной страницы должен существовать по соответствующему пути к файлу и включать экспорт, определяющий страницу как фрагментную:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>На меня нажали!</div>
```

Более подробную информацию об использовании htmx см. в [документации htmx](https://htmx.org/docs/).
